<!-- 优惠劵列表  -->
<template>
	<view class="page_box">
		<view class="content_box padding">
			<cu-custom :isBack="true">
				<block slot="backText"></block>
				<block slot="content">我的伙伴</block>
			</cu-custom>
			<view class="head padding flex">
				<image :src="userInfo.avatar" mode="" class="round " style="width:100rpx  ; height: 100rpx;"></image>
				<view class="flex flex-direction justify-around margin-left">
					<text class="text-bold">{{ userInfo.nickname }}</text>
					<text>{{ userInfo.molile }}</text>
				</view>
			</view>
			<view class="radius padding flex justify-between" style="width: 706rpx; height: 160rpx;background-color: #FFFFFF;">
				<view class="flex flex-direction justify-between">
					<text style="color: #746445; font-size: 26rpx;">当前收益（元）</text>
					<text style="color: #52452C; font-size: 44rpx;">{{ userInfo.kt_money }}</text>
				</view>
				<view class="flex align-center ">
					<text
						@click="show"
						style="background-color: #B39C72;display: block;color: #FFFFFF; width: 130rpx; height: 50rpx;line-height: 50rpx; "
						class="round text-center margin-right"
					>
						提现
					</text>
					<text
						@click="jump('pages/app/coupon/tuandui1')"
						style="background-color: #B39C72;display: block;color: #FFFFFF; width: 130rpx; height: 50rpx;line-height: 50rpx;  "
						class="round   text-center"
					>
						明细
					</text>
				</view>
			</view>
			<!--  @tap="jump('pages/app/coupon/tuandui')" -->
			<view class="radius padding flex justify-between margin-top align-center" style="width: 706rpx; background-color: #FFFFFF;">
				<text class="text-black">分销团队</text>
				<view class="cu-avatar-group  ">
					<view class="cu-avatar round " v-for="(item, index) in teamDate" :key="index"><image :src="$IMG_URL + item.avatar" mode="" v-if="item.avatar"></image></view>
					<!-- <text class="text-right margin-left-sm"></text> -->
				</view>
			</view>
			<view class="padding">
				<text class="cuIcon-title text-lg">分销订单</text>
				<view v-for="(item, index) in couponList" :key="index" class="padding-tb-sm flex justify-around align-center">
					<image src="../../../static/czz.png" mode="" style="width: 75rpx; height: 75rpx;" class="radius "></image>
					<view class="flex  margin-left align-center">
						<view class="flex flex-direction">
							<text style="color: #232323;font-size: 28rpx;">时间: {{ tools.timestamp(item.createtime) }}</text>
							<text style="color: #BABABA;font-size: 24rpx; width: 50vw;" class="text-cut block response">订单号: {{ item.order_number }}</text>
						</view>
					</view>
					<text class="text-price text-bold" style="color: #000000;">{{ item.dividend_amount }}</text>
				</view>
			</view>
			<shopro-modal v-model="showModal" style="z-index: 88;">
				<block slot="modalContent">
					<view class="modal-box padding-top">
						<view class="modal-head">
							<!-- <image class="modal-head-img" src="" mode=""></image> -->

							<text class="modal-head-title">提现金额</text>
						</view>
						<input class="inp" type="number" v-model="money" placeholder="在此输入提现金额" placeholder-class="pl-inp" />
						<button class="cu-btn post-btn" @tap="postMoney">提现</button>
					</view>
				</block>
			</shopro-modal>
		</view>

		<!-- 自定义底部导航 -->
		<shopro-tabbar></shopro-tabbar>
		<!-- 关注弹窗 -->
		<shopro-float-btn></shopro-float-btn>
		<!-- 连续弹窗提醒 -->
		<shopro-notice-modal></shopro-notice-modal>
		<!-- 登录提示 -->
		<shopro-login-modal></shopro-login-modal>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			tools: this.$tools,
			stateCurrent: 1,
			couponList: [],
			teamDate: [],
			showModal: false,
			money: '',
			userInfo: {},
		};
	},
	computed: {},
	onLoad() {
		this.userInfo = uni.getStorageSync('userInfo');
		this.getCouponList();
		let e = this.$Route.query;
	},
	methods: {
		show() {
			if (this.userInfo.kt_money > 0) {
				this.showModal = true;
			} else {
				this.$tools.toast('当前收益不足');
			}
		},
		postMoney() {
			if (!this.money) return this.$tools.toast('请输入提现金额');

			this.showModal = false;
			this.apply();
		},
		// 提现
		apply() {
			let that = this;
			that.$api('user_wallet_apply.apply', {
				money: that.money,
			}).then(res => {
				this.money = '';
				if (res.code === 1) {
					console.log('res :>> ', res);
				}
			});
		},
		jump(path, parmas) {
			console.log('1111 :>> ', 1111);
			this.$Router.push({
				path: path,
				query: parmas,
			});
		},
		// 套餐包
		getCouponList() {
			let that = this;
			that.$api('ordrss', {}).then(res => {
				console.log('111 :>> ', res);
				this.couponList = res.data.data;
				this.myTeam();
			});
		},

		myTeam() {
			let that = this;
			that.$api('myTeam', {}).then(res => {
				console.log('222 :>> ', res);
				this.teamDate = res.data.data;
			});
		},
	},
};
</script>

<style lang="scss">
.content_box {
	background: linear-gradient(180deg, rgba(239, 196, 128, 1) 0%, rgba(248, 220, 165, 1) 25%, rgba(255, 255, 255, 1) 98%);
}
.page_box {
	background: #fff;
}
.modal-box {
	background: #fff;
	width: 610rpx;
	margin: 0 auto;
	border-radius: 20rpx;
	.modal-head-img {
		width: 100%;
		height: 213rpx;
	}

	.modal-head-title {
		font-size: 35rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #6d5028;
		line-height: 42rpx;
	}

	.inp {
		width: 501rpx;
		height: 78rpx;
		border: 1rpx solid rgba(168, 112, 13, 1);
		margin: 60rpx auto 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #6d5028;

		.pl-inp {
			color: #bd9560;
		}
	}

	.radio {
		width: 500rpx;
		padding: 0 50rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(200, 150, 61, 1);
		margin-bottom: 20rpx;

		.radio-inp {
			transform: scale(0.7);
			margin-right: 10rpx;
		}
	}

	.post-btn {
		width: 492rpx;
		height: 70rpx;
		background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
		box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
		border-radius: 35rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		padding: 0;
		margin-bottom: 60rpx;
	}
}
</style>
